<template>
  <el-dialog v-model="visible" title="部门/人员目标完成情况" width="840" show-footer show-zoom resize @close="close" :close-on-click-modal="false">
    <template #default>
      <el-form label-align="right" label-width="80" class="form">
        <el-row class="h-[32px]">
          <el-col :span="8">
            <el-form-item label="指标:" class="h-[32px]">{{ detail.indicator_type_text }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="目标:" class="h-[32px]"
              >{{ detail.target }} <span v-if="detail.indicator_type != 2">{{ detail.currency }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="达成率:" class="h-[32px]">{{ detail.achieving_rate }} %</el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table :data="detail.members" border style="width: 100%" highlight-current-row height="400">
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column prop="name" label="部门/人员" width="180" />
        <el-table-column prop="target" label="部门/人员目标" width="180">
          <template #default="{ row }">
            {{ row.target }} <span v-if="detail.indicator_type != 2">{{ detail.currency }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="finish" label="实际完成" width="180">
          <template #default="{ row }">
            {{ row.finish }} <span v-if="detail.indicator_type != 2">{{ detail.currency }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="达成率" width="180">
          <template #default="{ row }"> {{ row.achieving_rate }} % </template>
        </el-table-column>
      </el-table>
    </template>
    <template #footer>
      <el-button @click="close">关闭</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
import { kpiFinish } from "../api/index"
import { reactive, ref, toRefs } from "vue"

const visible = ref(false)
const emits = defineEmits(["query"])
const props = defineProps({
  options: { type: Array, default: () => [] },
})

const data = reactive({
  detail: {},
  title: "新增",
  daysApart: 0,
})
const { detail, daysApart } = toRefs(data)

const open = (id) => {
  visible.value = true
  if (id) getDetail(id)
}

const getDetail = async (id) => {
  try {
    const res = await kpiFinish({ id })
    detail.value = res.data
  } catch (e) {
    throw Error(e)
  }
}
const close = () => {
  visible.value = false
  detail.value = {}
}
defineExpose({ open })
</script>
<style lang="scss" scoped>
.form {
  :deep(.el-form-item__label) {
    margin-bottom: 0 !important;
  }
}
.borderNone {
  :deep(.el-input__wrapper) {
    border: none;
    box-shadow: none;
  }
}
</style>
